<template>
    <div v-loading="loading">
        <el-form :inline="true" :model="prescription" class="demo-form-inline">
            <el-button type="primary" @click="addPrescription">开药</el-button>
            <el-form-item label="病历号" class="search">
                <el-input v-model="prescription.caseNumber"></el-input>
            </el-form-item>
            <el-form-item label="处方名称" class="search">
                <el-input v-model="prescription.prescriptionName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData(1)">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table class="container"
                :data="tableData"
                border>
            <el-table-column
                    fixed
                    prop="prescription.id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="medicalRecord.caseNumber"
                    label="病历号"
                   >
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <p v-for="(item,index) in scope.row.prescriptionDetaileds" :key="index" style="margin-top: 10px">
                        <span class="name"><span class="title">药品名：</span>{{item.drugs.drugsName}}</span>
                        <span class="content"><span class="title">用法：</span>{{item.drugsUsage}}</span>
                        <span class="content"><span class="title">用量：</span>{{item.dosage}}</span>
                        <span class="content"><span class="title">频次：</span>{{item.frequency}}</span>
                        <span class="content"><span class="title">数量：</span>{{item.amount}}</span>
                        <span class="content"><span class="title">状态：</span>{{item.state|state}}</span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="prescription.prescriptionName"
                    label="处方名称">
            </el-table-column>
            <el-table-column
                    prop="prescription.prescriptionTime"
                    label="开立时间"
                    sortable>
                <template scope="scope">
                    <!--调用过滤器显示需要的数据 -->
                    <el-tag type="success">{{scope.row.prescription.prescriptionTime|dateFormat}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="prescription.prescriptionState"
                    label="处方状态"
                    :filters="[{ text: '暂存', value: 1 }, { text: '已开立', value: 2 },{ text: '已作废', value: 0 },{ text: '已交费', value: 3 }]"
                    :filter-method="filterTag"
                    >
                <template scope="scope">
                    <el-tag type="success" effect="dark" v-if="scope.row.prescription.prescriptionState===1">暂存</el-tag>
                    <el-tag effect="dark" v-if="scope.row.prescription.prescriptionState===2">已开立</el-tag>
                    <el-tag effect="success" v-if="scope.row.prescription.prescriptionState===3">已交费</el-tag>
                    <el-tag type="info" effect="dark" v-if="scope.row.prescription.prescriptionState===0">已作废</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="prescriptionDetaileds.length"
                    label="药品数量">
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="page">
            <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :page-size="pageInfo.pageSize"
                    :current-page="pageInfo.pageNum"
                    @current-change="handleCurrentChange"
                    :total="pageInfo.total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import {HOST} from "../../common/config";
    import {makeDate} from "../../common/dealDate";

    export default {
        name: "prescription",
        data() {
            return {
                tableData: [],
                pageInfo:[],
                prescription:{
                    caseNumber:'',
                    prescriptionName:''
                },
                loading:true
            }
        },
        mounted:function () {
            this.getData(1);
        },
        methods:{
            addPrescription(){
                this.$router.push('/addPrescription');
            },
            getData(page){
                let path=`${HOST}/prescriptions`;
                let params={
                    currentPage:page,
                    caseNumber:this.prescription.caseNumber,
                    prescriptionName:this.prescription.prescriptionName
                };
                this.$ajax.get(path,{
                    params:params
                }).then((res)=>{
                    this.pageInfo=res.data;
                    this.tableData=res.data.list;
                    this.loading=false
                })
            },
            filterTag(value, row) {
                return row.prescription.prescriptionState === value;
            },
            handleCurrentChange(val){
                this.getData(val);
            }
        },
        filters:{
            dateFormat(val){
                return makeDate(val)
            },
            state(val){
                let res='';
                switch (val) {
                    case 2:res='已开立';break;
                    case 3:res='已交费';break;
                    case 4:res='已发药';break;
                    case 5:res='已退药';break;
                    case 6:res='已退费';break;
                }
                return res;
            }
        }
    }
</script>

<style scoped>
    .page{
        margin-top: 10px;
    }
    .search{
        margin-left: 10px;
    }
    .title{
        color: #99a9bf;
    }
    .content{
        width: 150px;
        display: inline-block;
    }
    .container{
        margin-top: 10px;
    }
    .name{
        width: 250px;
        display: inline-block;
    }
</style>